        <%--
Created by IntelliJ IDEA.
User: 林龙
Date: 2024/12/20
Time: 上午11:44
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="java.util.ArrayList" %>
<html>
<head>
    <title>购物车</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4; /* 背景颜色 */
            margin-top: 4%;
        }

        .container {
            max-width: 1200px;
            margin: 20px auto; /* 上下边距 */
            padding: 20px;
            background-color: #fff; /* 主内容背景颜色 */
            border-radius: 8px; /* 圆角 */
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影效果 */
        }

        h1 {
            text-align: center; /* 标题居中 */
            margin-bottom: 20px; /* 下边距 */
        }

        .cart-item {
            display: flex; /* 使用flex布局 */
            align-items: center; /* 垂直居中 */
            border: 1px solid #ccc; /* 边框 */
            padding: 10px; /* 内边距 */
            margin-bottom: 10px; /* 下边距 */
        }

        .cart-item img {
            width: 80px; /* 图片宽度 */
            height: 80px; /* 图片高度 */
            margin-right: 20px; /* 右边距 */
        }

        .item-details {
            flex-grow: 1; /* 填充剩余空间 */
        }

        .item-name {
            font-size: 18px; /* 字体大小 */
            font-weight: bold; /* 字体加粗 */
        }

        .item-price {
            font-size: 16px; /* 字体大小 */
            color: #333; /* 字体颜色 */
        }

        .remove-button {
            background-color: #ff4d4d; /* 删除按钮背景颜色 */
            color: white; /* 字体颜色 */
            border: none; /* 去掉边框 */
            padding: 5px 10px; /* 内边距 */
            cursor: pointer; /* 鼠标指针样式 */
        }

        .total {
            font-size: 20px; /* 字体大小 */
            font-weight: bold; /* 字体加粗 */
            margin-top: 20px; /* 上边距 */
            text-align: right; /* 右对齐 */
        }

        .checkout-button {
            display: block; /* 块级元素 */
            width: 100%; /* 宽度100% */
            padding: 10px; /* 内边距 */
            background-color: #007bff; /* 背景颜色 */
            color: white; /* 字体颜色 */
            border: none; /* 去掉边框 */
            border-radius: 4px; /* 圆角 */
            cursor: pointer; /* 鼠标指针样式 */
            text-align: center; /* 文本居中 */
            margin-top: 20px; /* 上边距 */
            transition: background-color 0.3s; /* 添加过渡效果 */
        }

        .checkout-button:hover {
            background-color: #0056b3; /* 悬停时背景颜色 */
        }

        .select-all {
            margin-bottom: 20px; /* 上边距 */
        }

        .modal {
            display: none; /* 默认隐藏 */
            position: fixed; /* 固定定位 */
            z-index: 1000; /* 层级 */
            left: 0;
            top: 0;
            width: 100%; /* 宽度100% */
            height: 100%; /* 高度100% */
            overflow: auto; /* 启用滚动 */
            background-color: rgba(0, 0, 0, 0.4); /* 半透明背景 */
        }

        .modal-content {
            background-color: #fefefe;
            margin: 15% auto; /* 上下边距 */
            padding: 20px; /* 内边距 */
            border: 1px solid #888;
            width: 80%; /* 宽度80% */
        }

        .close {
            color: #aaa; /* 关闭按钮颜色 */
            float: right; /* 右对齐 */
            font-size: 28px; /* 字体大小 */
            font-weight: bold; /* 字体加粗 */
        }

        .close:hover,
        .close:focus {
            color: black; /* 悬停时颜色 */
            text-decoration: none; /* 去掉下划线 */
            cursor: pointer; /* 鼠标指针样式 */
        }
    </style>
    <style>

        /* 头部样式 */
        .header {
            background-color: #fff; /* 头部背景颜色 */
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
            padding: 15px 50px; /* 设置内边距 */
            position: fixed; /* 固定头部 */
            width: 100%; /* 头部宽度100% */
            top: 0; /* 顶部对齐 */
            z-index: 1000; /* 设置层级 */
        }

        .header-content {
            display: flex; /* 使用flex布局 */
            justify-content: space-between; /* 两端对齐 */
            align-items: center; /* 垂直居中 */
            max-width: 1200px; /* 最大宽度 */
            margin: 0 auto; /* 水平居中 */
        }

        .logo {
            display: flex; /* 使用flex布局 */
            align-items: center; /* 垂直居中 */
            gap: 10px; /* 设置间距 */
            text-decoration: none; /* 去掉下划线 */
            color: #333; /* 字体颜色 */
        }

        .logo span {
            font-size: 24px; /* 字体大小 */
            font-weight: bold; /* 字体加粗 */
        }

        .nav-links {
            display: flex; /* 使用flex布局 */
            gap: 30px; /* 设置间距 */
        }

        .nav-links a {
            text-decoration: none; /* 去掉下划线 */
            color: #333; /* 字体颜色 */
            font-size: 16px; /* 字体大小 */
            transition: color 0.3s; /* 添加过渡效果 */
        }

        .nav-links a:hover {
            color: #007bff; /* 悬停时字体颜色 */
        }

        .auth-buttons {
            display: flex; /* 使用flex布局 */
            gap: 15px; /* 设置间距 */
        }

        .auth-buttons a {
            text-decoration: none; /* 去掉下划线 */
            padding: 8px 20px; /* 设置内边距 */
            border-radius: 4px; /* 设置圆角 */
            transition: all 0.3s; /* 添加过渡效果 */
        }

        .login-btn {
            color: #007bff; /* 登录按钮字体颜色 */
            border: 1px solid #007bff; /* 登录按钮边框 */
        }

        .login-btn:hover {
            background-color: #007bff; /* 悬停时背景颜色 */
            color: #fff; /* 悬停时字体颜色 */
        }

        .register-btn {
            background-color: #007bff; /* 注册按钮背景颜色 */
            color: #fff; /* 注册按钮字体颜色 */
            border: 1px solid #007bff; /* 注册按钮边框 */
        }

        .register-btn:hover {
            background-color: #0056b3; /* 悬停时背景颜色 */
            border-color: #0056b3; /* 悬停时边框颜色 */
        }

        /* 页脚样式 */
        .footer {
            background-color: #333; /* 页脚背景颜色 */
            color: #fff; /* 字体颜色 */
            padding: 30px 0; /* 设置上下内边距 */
            position: fixed; /* 固定页脚 */
            bottom: 0; /* 底部对齐 */
            width: 100%; /* 宽度100% */
            z-index: 100; /* 设置层级 */
        }

        .footer-content {
            max-width: 1200px; /* 最大宽度 */
            margin: 0 auto; /* 水平居中 */
            text-align: center; /* 文本居中 */
        }
    </style>
</head>
<body>
<!-- 头部导航 -->
<header class="header">
    <div class="header-content">
        <a href="index.jsp" class="logo">
            <span>🎮 云城游戏</span> <!-- 网站名称 -->
        </a>
        <nav class="nav-links">
            <a href="index.jsp">游戏中心</a> <!-- 游戏中心链接 -->
            <a href="gouwuche.jsp">我的购物车</a> <!-- 我的购物车 -->
            <a href="#about">关于我们</a> <!-- 关于我们链接 -->
            <a href="dingdan.jsp">我的订单</a> <!-- 我的订单链接 -->
        </nav>
        <div class="auth-buttons">
            <% if (session.getAttribute("user") == null) { %> <!-- 检查用户是否登录 -->
            <a href="login.jsp" class="login-btn">登录</a> <!-- 登录按钮 -->
            <a href="register.jsp" class="register-btn">注册</a> <!-- 注册按钮 -->
            <% } else { %> <!-- 用户已登录 -->
            <div class="user-info">
                <span class="username">👤 <%=session.getAttribute("user")%></span> <!-- 显示用户名 -->
                <a href="logout" class="logout-btn">退出</a> <!-- 退出按钮 -->
            </div>
            <% } %>
        </div>
    </div>
</header>
<div class="container">
    <h1>我的购物车</h1>
    <div class="select-all">
        <input type="checkbox" id="selectAll"> 全部选择
    </div>
    <%
        ArrayList<String> cart = (ArrayList<String>) session.getAttribute("cart");
        double totalPrice = 0.0;
        String gameName = null;
        String gameImg = null;
        String gameTxt = null;
        if (cart == null || cart.isEmpty()) {
    %>
        <div>购物车是空的</div>
    <%
    } else {
        for (String item : cart) {
            String[] productDetails = item.split(",");
            gameName = productDetails[1];
            String gameMoney = productDetails[2];
            gameImg = productDetails[3];
            gameTxt = productDetails[4];
            totalPrice += Double.parseDouble(gameMoney);
    %>
        <div class="cart-item">
            <input type="checkbox" class="item-checkbox" value="<%=item%>">
            <img src="<%=gameImg%>" alt="<%=gameName%>" style="width: 80px; height: 80px; margin-right: 20px;">
            <span><%=gameName%> - ￥<%=gameMoney%></span>
            <button class="remove-button" onclick="removeItem('<%=item%>')">删除</button>
        </div>
    <%
            }
        }
    %>
    <div class="total">总金额: ￥<%=totalPrice%></div>
    <button class="checkout-button" onclick="openModal()">结算</button>
</div>

<!-- 确认结算模态框 -->
<div id="checkoutModal" class="modal">
    <div class="modal-content">
        <span class="close" onclick="closeModal()">&times;</span>
        <h2>确认结算</h2>
        <div id="selectedItems"></div>
        <p>总金额: ￥<span id="modalTotalPrice"></span></p>
        <button onclick="confirmCheckout()">确认结算</button>
    </div>
</div>

<!-- 页脚 -->
<footer class="footer">
    <div class="footer-content">
        <p>© 2024 云城游戏门户. All rights reserved.</p> <!-- 页脚版权信息 -->
        <p>
            <a href="https://beian.miit.gov.cn/" target="_blank" style="color: #fff; text-decoration: none;">
                陕ICP备2024054614号
            </a>
            &nbsp;|&nbsp;
            <a href="http://www.beian.gov.cn/portal/registerSystemInfo" target="_blank" style="color: #fff; text-decoration: none;">
                <img src="https://img.mcfengqi.icu/LightPicture/2024/11/75fb7a50447cf897.png" alt="公安备案图标" style="vertical-align: middle; margin-right: 3px;">
                陕公网安备61019102000653
            </a>
        </p>
    </div>
</footer>

<script>
    document.getElementById('selectAll').addEventListener('change', function() {
        const checkboxes = document.querySelectorAll('.item-checkbox');
        checkboxes.forEach(checkbox => {
            checkbox.checked = this.checked;
        });
    });

    function openModal() {
        const checkboxes = document.querySelectorAll('.item-checkbox:checked');
        const selectedItems = document.getElementById('selectedItems');
        const modalTotalPrice = document.getElementById('modalTotalPrice');
        let total = 0;
        selectedItems.innerHTML = ''; // 清空之前的内容

        checkboxes.forEach(checkbox => {
            const itemDetails = checkbox.value.split(",");
            const gameName = itemDetails[1];
            const gameMoney = parseFloat(itemDetails[2]);
            total += gameMoney;
            // selectedItems.innerHTML += `<p>${gameName} - ￥${gameMoney}</p>`; // 使用 JavaScript 注释
        });

        modalTotalPrice.innerText = total.toFixed(2);
        document.getElementById('checkoutModal').style.display = 'block'; // 显示模态框
    }

    function closeModal() {
        document.getElementById('checkoutModal').style.display = 'none'; // 隐藏模态框
    }

    function confirmCheckout() {
        const checkboxes = document.querySelectorAll('.item-checkbox:checked');
        const selectedItems = [];

        checkboxes.forEach(checkbox => {
            selectedItems.push(checkbox.value);
        });

        // 计算总金额和其他订单信息
        let total = 0;
        selectedItems.forEach(item => {
            const itemDetails = item.split(",");
            total += parseFloat(itemDetails[2]); // 假设价格在第三个位置
        });

        const orderData = {
            items: selectedItems,
            total: total.toFixed(2),
            amount: total.toFixed(2), // 假设支付金额等于总金额
            status: "已支付",
            paytype: "wechat",
            gamename: "<%=gameName%>", // 需要从选中项中提取
            gameimg: "<%=gameImg%>", // 需要从选中项中提取
            gametxt: "<%=gameTxt%>", // 需要从选中项中提取
            user_id: 1 // 假设用户ID
        };

        fetch('OrderServlet', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(orderData)
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('结算成功！');
                location.href = 'dingdan.jsp'; // 跳转到订单页面
            } else {
                alert('结算失败：' + data.error);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('系统错误，请稍后重试');
        });
    }

    function removeItem(item) {
        if (confirm('确定要删除该商品吗？')) {
            fetch('RemoveFromCartServlet', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ item: item })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert('商品已删除！');
                    location.reload(); // 刷新页面以更新购物车
                } else {
                    alert('删除失败：' + data.error);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('系统错误，请稍后重试');
            });
        }
    }
</script>
</body>
</html>
